<template>
  <div class="cardBox" @click="click">
    <div
      class="icon"
      :style="{ backgroundColor: iconBgcColor ? iconBgcColor : '#2d8cf0' }"
    >
      <i :class="icon ? icon : 'el-icon-platform-eleme'" />
    </div>
    <div class="content">
      <div class="numInfo">{{ numTip }}</div>
      <div class="textInfo">{{ textTip }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 数字提示
    numTip: {
      type: String,
      default: '0'
    },
    // 文字提示
    textTip: {
      type: String,
      default: '默认提示'
    },
    // 图标
    icon: {
      type: String,
      default: ''
    },
    // 图标背景色
    iconBgcColor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {
    // 点击
    click() {
      this.$emit('cardClick')
    }
  }
}
</script>

<style lang="scss" scoped>
$height: 110px;
.cardBox {
  height: $height;
  width: 100%;
  cursor: pointer;
  // border: 2px rgb(12, 11, 11) solid;
  //   background-color: pink;
  .icon {
    float: left;
    height: $height;
    line-height: $height;
    width: 36%;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 5px 0 0 5px;
    text-align: center;
    img{
      margin-top: 20px;
      width: 50px;
      height: 50px;
    }
  }
  //vertical-align: middle;
  .content {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: $height;
    width: 64%;
    border-radius: 0 5px 5px 0;
    background-color: #fff;
    .numInfo {
      color: #515a6e;
      font-size: 30px;
      margin-bottom: 5px;
      // text-decoration:underline;
    }
  }
}
.icon-anjianjingling,.icon-js{
  font-size: 32px;
}
</style>
